<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <!-- 添加按钮 -->
          <el-row type="flex">
            <el-col>
              <el-button
                size="small"
                type="primary"
                @click="isShowDialog = true"
              >添加经纪</el-button>
            </el-col>
            <!-- 搜索 -->
            <el-col>
              <el-row type="flex" class="inputDeep">
                <el-input v-model="keyword" placeholder="请输入关键字" />
                <el-button icon="el-icon-search" @click="search" />
              </el-row>
            </el-col>
          </el-row>
        </div>
        <div class="text item" style="height: 100%">
          <!-- 表格-->
          <el-table :data="agentsList" border style="width: 100%">
            <el-table-column prop="image" label="图片" width="180">
              <template v-slot="{ row }">
                <img class="tableData_image" :src="row.image" alt="">
              </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" width="180" />
            <el-table-column prop="email" label="邮箱" />
            <el-table-column prop="phone" label="电话" />
            <el-table-column prop="address" label="地址" />
            <el-table-column prop="desc" label="介绍" />
            <el-table-column label="操作">
              <template v-slot="{row}">
                <el-button size="small" type="primary" @click="editFn(row.id)">编辑</el-button>
                <el-button size="small" type="danger" @click="delFn(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页器 -->
        <el-row type="flex" justify="center">
          <el-pagination
            layout="prev,pager,next"
            :page-size="pageConfig._limit"
            :total="total"
            @current-change="currentChange"
          />
        </el-row>
        <!--  添加经纪弹窗 -->
        <AgentsDialog
          ref="agentsDialog"
          :agent-list="agentsList"
          :is-show-dialog.sync="isShowDialog"
          @reloadPage="loadPage"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import { getAgentsList, getAgentsNumber, delAgents } from '@/api/agents'
import AgentsDialog from './components/agents-dialog.vue'
export default {
  components: {
    AgentsDialog
  },
  data() {
    return {
      agentsList: [],
      total: 0,
      isShowDialog: false,
      currentPage: 1,
      keyword: ''
    }
  },
  computed: {
    pageConfig() {
      // 设定每页长度
      const pageSize = 2
      // 每次拿数据, 都根据每页长度和当前页码算出需要的参数
      // start 是指在所有全部的数据中, 从第几条开始拿数据(每页初始值)
      // 如果每页长度是3条
      // 现在是第4页
      // 1=>012
      // 2=>345
      // 3=>678
      // 4=>9 10 11
      return {
        _limit: pageSize,
        _start: (this.currentPage - 1) * pageSize
      }
    }
  },
  created() {
    // 获取经纪列表
    this.loadPage()
  },
  methods: {
    // 编辑
    editFn(id) {
      this.isShowDialog = true
      this.$refs.agentsDialog.getAgents(id)
    },
    // 获取经纪列表
    async loadPage() {
      this.agentsList = await getAgentsList({
        ...this.pageConfig,
        // 这里适配有或者没有搜索条件的加载
        name_contains: this.keyword || null
      })
      this.total = await getAgentsNumber({
        name_contains: this.keyword || null
      })
    },
    currentChange(newPage) {
      // 每页的开始, 都是前一页的结束索引加一, 也就是前面所有页面的长度总和
      this.currentPage = newPage
      this.loadPage()
    },
    search() {
      // 发请求带上搜索参数
      this.currentPage = 1
      this.loadPage()
    },
    async delFn(id) {
      // 二次询问
      await this.$confirm('是否确认删除')
      // 发请求
      await delAgents(id)
      // 提示用户
      this.$message.success('删除成功')
      // 更新页面
      this.loadPage()
    }
  }
}
</script>

<style lang=scss scoped>
.tableData_image {
  width: 150px;
  /* object-fit: cover; */
}
</style>
